<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery.js"></script>
</head>
<style>
    .box {
        width: 400px;
        height: 600px;
        border: 1px solid black;
        text-align: center;
        position: absolute;
        top: 10%;
        left: 40%;
        margin: auto;
        display: none;
    }

    #down,
    #publish {
        width: 80px;
        height: 40px;
        float: right;
    }

    input {
        width: 350px;
        height: 40px;
        font-size: 24px;
    }

    #message {
        width: 300px;
        height: 100px;
    }

    table {
        border-collapse: collapse;
        margin-top: 50px;
    }

    tr,
    th,
    td {
        width: 150px;
        height: 60px;
        text-align: center;
        border: 1px solid black;
    }

    body {
        width: 100%;
        height: 100%;
        z-index: 99;
    }

    .back {
        width: 100%;
        height: 100vh;
        z-index: 999;
    }
</style>

<body>
    <div class="back">
        <button id="message">我要留言</button>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>留言人</th>
                    <th>内容</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <div class="box">
        <h1>发布留言</h1>
        <hr>
        <h4>留言标题</h4>
        <input type="text">
        <h4>留言人</h4>
        <input type="text">
        <h4>留言内容</h4>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <hr>
        <button id="down">关闭</button>
        <button style="background: blue;color: white;" id="publish">发布</button>
    </div>

</body>
<script>
    // 打开页面 可以看到留言列表
    // 点击留言按钮 弹出添加留言表单
    // 点击发布 ，显示发布成功， 1秒后关闭弹出， 显示最新留言列表
    // 点击删除 弹出二次确认弹框 确定即删除，取消则不删，删除成功提示然后显示最新的列表
    // 接口地址如下：
    // ​ 获取留言列表：GET https://liu.zzgoodqc.cn/lyb
    // ​ 发布留言接口：POST https://liu.zzgoodqc.cn/lyb/add
    // ​ 发布留言需要的字段：
    // ​ title、content、name
    // ​ 删除接口地址：GET https://liu.zzgoodqc.cn/del/2
    // ​ 2是该留言的id 获取列表时会返回id
    // 注意留言列表所有人都可以看到 ，不要操作别人的留言


    $(function () {
        messageHtml()
        publishHtml()
        $('tbody').bind('click', 'button', delFn)
    })
    // 我要留言
    $('#message').click(function () {
        $('.box').show()
        // $('.back').css('background-color','black').css('opacity','0.2')
        $('.back').css({ background: 'black', opacity: '0.2' })
    })
    // 关闭按钮
    $('#down').click(function () {
        $('.box').hide()
        $('.back').css('background-color', 'white').css('opacity', '1')
    })
    // 页面渲染
    function messageHtml() {
        $.get('https:liu.zzgoodqc.cn/lyb', function (res, sss) {
            var str = ''
            for (let i in res.data) {
                str += `<tr>
                                <td class='ids'>${res.data[i].id}</td>
                                <td>${res.data[i].name}</td>
                                <td>${res.data[i].title}</td>
                                <td>${res.data[i].content}</td>
                                <td>${res.data[i].updated_at}</td>
                                <td><button name='del'>删除</button></td>
                            </tr>`
            }
            $('tbody').html(str)
        }, 'Json')
    }

    function publishHtml() {
        $('#publish').click(function () {
            var title = $('input:first').val()
            var content = $('input:last').val()
            var name = $('textarea').val()
            $.ajax({
                url: 'https://liu.zzgoodqc.cn/lyb/add',
                method: 'POST',
                dataType: 'Json',
                data: {
                    title: title,
                    content: content,
                    name: name
                },
                success: function () {
                    if (title || content || name) {
                        alert('成功')
                        $('.back').css('background-color', 'white').css('opacity', '1').show()
                        $('.box').hide()

                        messageHtml()

                    } else if (!title || !content || !name) {
                        alert('失败')
                    }

                }
            })
        })
    }
    function delFn(even) {
        var target = $(even.target)
        // console.log(target);
        if (target.prop('name') == 'del') {
            var myid = target.parent().siblings('.ids').html()
            $.get(`https://liu.zzgoodqc.cn/del/${myid}`, function (res, sss) {
                messageHtml()
            }, 'Json')

        }

    }
    
</script>

</html>